<template>
  <div>
    <el-tooltip effect="dark" content="软外拨，拨打外部电话时请在前面加0" placement="bottom">
      <div>
          <el-switch
                  v-model="callData.isSigned"
                  active-text="签入"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  @change="signInOutMethod()"
                  inactive-text="签出">
          </el-switch>
          <el-switch
                  v-model="callData.isIdled"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="置闲"
                  @change="idleBusyMethod()"
                  inactive-text="置忙">
          </el-switch>
          <!--<div style="margin-top: 15px;">-->
              <!--<el-input placeholder="请输入内容" v-model="input5" class="input-with-select">-->
                  <!--<el-select v-model="select" slot="prepend" placeholder="请选择">-->
                      <!--<el-option label="餐厅名" value="1"></el-option>-->
                      <!--<el-option label="订单号" value="2"></el-option>-->
                      <!--<el-option label="用户电话" value="3"></el-option>-->
                  <!--</el-select>-->
                  <!--<el-button slot="append" icon="el-icon-search"></el-button>-->
              <!--</el-input>-->
          <!--</div>-->
        <el-input v-model="destination" size="mini" id="destination" placeholder="输入电话号码" style="width: 200px" class="input-with-select">
            <el-select v-model="outIn" slot="prepend" placeholder="请选择">
                <el-option label="拨打外网" value="0"></el-option>
                <el-option label="拨打内网" value=""></el-option>
            </el-select>
        </el-input>
        <el-button class="btn-text can-hover site-demo-layim" :disabled="callData.isCalling" type="text" @click="call()" data-type="messageAudio">
          <nx-icon name="phone-square"/>
        </el-button>
      </div>
    </el-tooltip>
    <div style="display: none">
      <div id="video_container" style="display: none;"></div>
      <audio src="" id="sound" controls="controls" loop="false" hidden="true"></audio>
      <video id="remoteVideo" hidden="true"/>
      <video id="localVideo" hidden="true" muted="true" />
    </div>
    <!--来电话接电话的小窗口-->
    <transition name="custom-classes-transition"
                enter-active-class="animated tada">
      <div id="inRing" v-if="callData.status=='inRing'" style="position: fixed;top: 10px;right: 10px;z-index: 200000000000000000;background-color: #cc000022;border:1px solid #cc0000;border-radius:10px;">
        <div class="padding">
          <button id="accept" type="submit" class="fa fa-phone el-button el-button--primary" @click="Accept()">接  听</button>
          <button id="reject" type="submit" class="fa fa-microphone-slash el-button el-button--danger" @click="Reject()" style="margin-left:1px">拒  接</button>
        </div>
      </div>
    </transition>
    <!--打电话出去的窗口-->
    <transition name="custom-classes-transition"
                enter-active-class="animated tada">
      <div id="outRing" v-if="callData.status=='outRing'" style="position: fixed;top: 10px;right: 10px;z-index: 200000000000000000;background-color: #cc000022;border:1px solid #cc0000;border-radius:10px;">
        <div class="padding">
          <button type="submit" class="fa fa-microphone-slash el-button el-button--danger" @click="HangeOn()" style="margin-left:1px">挂  断</button>
        </div>
      </div>
    </transition>
    <!--正在通话中-->
    <div id="isCalling" v-if="callData.status=='isCalling'" style="position: fixed;top: 10px;right: 10px;z-index: 200000000000000000;background-color: #cc000022;border:1px solid #cc0000;border-radius:10px;">
      <div class="padding">
        <button type="submit" class="fa fa-microphone-slash el-button el-button--danger" @click="HangeOn()" style="margin-left:1px">挂  断</button>
      </div>
    </div>
  </div>
</template>

<script>
import 'vue-transition.css'
import JsSIP from 'jssip'//拨打电话的插件
import nxIcon from '@/components/nx-icon'
import NProgress from 'nprogress'
export default {
  name: 'nx-call',
  components: {
    nxIcon,
  },
    watch:{
        destination:function () {
            this.callData.config.ua_uris=this.outIn+this.destination + "@" + nat
        },
        status:function (i) {//监听 来电话
            switch (i) {
                case 'normal':
                    this.closeAnimate()//关闭动画
                    break;
                case 'inRing':
                    this.openAnimate('#inRing')//开启来电的动画
                    break;
                case 'outRing':
                    this.openAnimate('#outRing')//开启来电的动画
                    break;
                case 'isCalling':
                    this.openAnimate('#isCalling')//正在通话中
                    break;
            }
            if (status){//没显示了
                this.closeAnimate()
            }else{
                this.openAnimate('#inShow')
            }
        },
    },
  data() {
      var that = this;
      var zuoxi = this.$cache_.getCookie('zuoxi');
      return {
          destination:'',//播进/播出电话
          outIn:'0',//播进/播出电话 in 为拨打内网 out为拨打外网
          callData:{//呼叫外界电话的所有配置
              status:'normal',//状态 正在通话中，isCalling,进来响铃中 inRing,出去响铃中 outRing,没有通话中 normal
              isSigned:false,//已经签入
              isIdled:false,//已经签入
              ua:{},//需要拨打的实例
              zuoxi:zuoxi,//坐席号码
              session:{},//通话的session
              config: {//外拨电话的配置
                  displayName: zuoxi,
                  uri: zuoxi + "@" + nat,//源电话
                  authorizationUser: zuoxi,
                  password: "123456",
                  wsServers: "wss://" + nat + ":7443",
                  ua_uri: zuoxi,
                  realm: nat,
                  ua_uris: that.destination + "@" + nat,//目标电话
                  traceSip: true
              }
          },
          layStatus:{},
          closed:true,
      };
  },
    methods:{
        signInOutMethod() {
            //点击了就改变了，所以这里是反的
            if (this.callData.isSigned){//变成了 true，表明之前的状态是 已经false，为未签入
                this.signIn()//进行签入操作
            }else{
                this.signOut()
            }
        },
        idleBusyMethod() {
            //点击了就改变了，所以这里是反的
            if (this.callData.isIdled){//变成了 true，表明之前的状态是 已经false，为置忙
                this.setIdle()//设置为置闲
            }else{
                this.setBusy()//设置为置忙
            }
        },
        Accept:function(){//接受电话
            this.callData.session.answer()
            this.$message({message:'已经接听！',type:'success'})
            this.callData.status = 'isCalling'
        },
        Reject:function(){//拒接电话
            if (this.callData.session.terminate) { //挂断
                this.callData.session.terminate();
                this.changeStatusText('已经拒接！','red')
            }
            this.$message({message:'已经拒接！',type:'error'})
            this.callData.status = 'normal'
        },
        HangeOn:function(){//停止拨打
            if (this.callData.session.terminate) { //挂断
                this.callData.session.terminate();
                this.changeStatusText('停止拨打！','red')
            }
            this.$message({message:'停止拨打！',type:'error'})
            this.callData.status = 'normal'
        },
        openAnimate:function(id){//响铃的按钮动画
            window.t1231233444=setInterval(()=>{
                $(id).removeClass().addClass('tada animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
                    $(this).removeClass();
                });
            },500)
        },
        closeAnimate:function(){//关闭动画
            clearInterval(window.t1231233444);
        },
        changeStatusText:function(c,color='',done=undefined){//状态字符初始化，done为true表示是点击了签入、拨打电话等按钮
            this.closed = true
            this.layStatus.click()
            $('#status_').append('<div style="word-wrap:break-word;color:'+color+'">'+this.$my_.getTime(new Date())+':'+this.destination +'<br/>'+c+'</div>')
            $("#callStatus").prop({ scrollTop: $('#status_')[0].offsetTop });
            this.$my_.writeLogs(color,'用户：'+this.$cache_.getCookie('user')+'   '+c)
            if(!done){
                NProgress.done();
                if (!$('#sound')[0].paused) {
                    $('#sound')[0].pause();
                }
            }else{
                NProgress.start()
            }
        },
        call:function(){//点击拨打电话按钮
            if (this.callData.isSigned){//签入
                $('#destination').css('border-color','green')
                if (this.destination.length==0){
                    this.$message({message:'请输入电话号码！',type:'error'})
                    $('#destination').focus()
                    $('#destination').css('border-color','red')
                }else if(parseFloat(this.destination).toString() == "NaN"){
                    this.$message('请输入数字！')
                    $('#destination').focus()
                    $('#destination').css('border-color','red')
                }else{
                    this.changeStatusText('正在拨打电话('+this.destination+')...','green')
                    this.callStart()
                }
            }else{//签出了
                this.$message({message:'未签入，请先签入！',type:'error'})
            }
        },
        initConfig:function(){//拨打电话的开始配置
            JsSIP.C.SESSION_EXPIRES = 280;//防止打电话session过期
            window.intervalIndex = -1
            var socket = new JsSIP.WebSocketInterface(this.callData.config.wsServers);
            var config = {
                sockets  : [ socket ],
                uri      : this.callData.config.uri,
                password : this.callData.config.password,
            };
            this.callData.ua = new JsSIP.UA(config);
        },
        signInListener:function(){//签入 监听
            this.callData.ua.on('registered', ()=>{//签入
                //将后台的该用户变成状态 为 真正上线
                this.$post('cti-manager/set-fs',
                    {data:{
                            1:"callcenter_config tier set state support@default "+this.callData.zuoxi+"@${domain} Ready",
                            2:"callcenter_config agent set status "+this.callData.zuoxi+"@${domain} Available",
                            3:"callcenter_config agent set state "+this.callData.zuoxi+"@${domain} 'Waiting'",
                        },
                        zuoxi:this.callData.zuoxi,
                        action:"signin",
                    }
                )
                    .then((response) => {
                        if (response.data == 1) {
                            let t = this;
                            this.$message({message:'签入成功！',type:'success'})
                            this.changeStatusText('已经签入')
                            this.setIdle()
                            this.callData.isSigned = true;
                            this.$post('cti-manager/save-zlg',//坐席登录后定时 提示freeswitch是否在线的标志数据库
                                {zuoxi:this.callData.zuoxi,time:(new Date().getTime()),sign:"sign"}
                            ).then(() => {
                                //签入成功就定时发送数据到后台 10s发送一次
                                myloop();
                                function myloop(){
                                    window.intervalIndex = setTimeout(() => {
                                        t.$post('cti-manager/save-zlg',//坐席登录后定时 提示freeswitch是否在线的标志数据库
                                            {zuoxi:t.callData.zuoxi,time:(new Date().getTime()),sign:"loop"}
                                        ).then(() => {
                                            myloop();
                                        });
                                    },10000);
                                }
                            }).catch((e) => {
                                consoleLog(e)
                                this.$message({message:'签入失败！',type:'error'})
                                this.changeStatusText('签入失败','red')
                                clearInterval(intervalIndex);
                                this.callData.isSigned = false;
                            });
                        }else{
                            this.$message({message:'签入失败！',type:'error'})
                            this.changeStatusText('签入失败','red')
                            clearInterval(intervalIndex);
                            this.callData.isSigned = false;
                        }
                    }).catch((e) => {
                    consoleLog(e)
                    this.$message({message:'签入失败！',type:'error'})
                    this.changeStatusText('签入失败','red')
                    clearInterval(intervalIndex);
                    this.callData.isSigned = false;
                });
            });
        },
        signInFaildListener:function(){//签入失败监听
            this.callData.ua.on('registrationFailure', ()=>{
                this.$message({message:'签入失败！',type:'error'})
                this.changeStatusText('签入失败','red')
            });
        },
        signOutListener:function(){//签出 监听
            this.callData.ua.on('unregistered',()=>{//签出
                //将后台的该用户变成状态 为 真正上线
                this.$post('cti-manager/set-fs',
                    {data:{
                            1:"callcenter_config tier set state support@default "+this.callData.zuoxi+"@${domain} Ready",
                            2:"callcenter_config agent set status "+this.callData.zuoxi+"@${domain} 'Logged Out'",
                        },
                        zuoxi:this.callData.zuoxi,
                        action:"signout",
                    }
                )
                    .then((response) => {
                        if (response.data == 1) {
                            this.$message({message:'签出成功！',type:'success'})
                            this.changeStatusText('已签出')
                            this.callData.isSigned = false;
                            this.callData.isIdled = false;
                            clearInterval(intervalIndex);
                            this.$post('cti-manager/save-zlg',//坐席登录后定时 提示freeswitch是否在线的标志数据库
                                {zuoxi:this.callData.zuoxi,time:(new Date().getTime()),sign:"unsign"}
                            )
                        }else{
                            this.$message({message:'签出失败！',type:'error'})
                            this.changeStatusText('签出失败','red')
                            clearInterval(intervalIndex);
                            $('[lay-type="hide"]').click();
                        }
                    }).catch((e) => {
                    consoleLog(e)
                    this.$message({message:'签出失败！',type:'error'})
                    this.changeStatusText('签出失败','red')
                    clearInterval(intervalIndex);
                    $('[lay-type="hide"]').click();
                });
            });
        },
        cominglListener:function(){//来电 监听
            this.callData.ua.on('newRTCSession',(e)=>{//来电话
                if (e.originator=="remote") {//远方 打来的
                    this.callData.session = e.session;
                    this.callData.session.on('connecting',(t)=>{//我方 正在响铃
                        this.destination = this.callData.session['remote_identity']['uri']['user']//来电话号码
                        this.callData.status = 'inRing'
                        $('#sound').attr('src',"static/sound/in.wav")//播放响铃语音
                        if ($('#sound')[0].paused) {
                            $('#sound')[0].play()//播放响铃语音
                        }
                        window.destination = this.destination
                        this.$router.push({path:"/hotCenter/hwzx"})
                        this.$message({message:this.destination+'来电！',type:'success'})
                        this.changeStatusText(this.destination+'来电','blue')
                        setTimeout(()=>{
                            if (this.destination!=''){
                                vue.$emit('ldhm',this.destination)
                            }
                        },600)
                    });
                    this.callData.session.on('accepted',()=>{//来电 我方接听
                        try {
                            var remoteVideo = document.getElementById('remoteVideo');
                            var localVideo = document.getElementById('localVideo');
                            setTimeout(()=>{//将语音桥梁打通，互相通话
                                var pc = this.callData.session._connection
                                var remoteStream = new MediaStream()
                                pc.getReceivers().forEach(function(receiver) {
                                    remoteStream.addTrack(receiver.track)
                                });
                                remoteVideo.srcObject = remoteStream
                                remoteVideo.play();
                                var stream = new MediaStream()
                                pc.getSenders().forEach(function(sender) {
                                    stream.addTrack(sender.track);
                                });
                                localVideo.srcObject = stream;
                                localVideo.play();
                                this.changeStatusText('已接通，正在通话中...');
                                this.callData.status = 'isCalling'
                            },100);
                        }catch (e) {
                            consoleLog(e)
                        }
                    });
                    this.callData.session.on('ended',()=>{//结束通话
                        this.$message({message:'结束通话！',type:'success'})
                        this.changeStatusText('结束通话')
                        this.callData.status = 'normal'
                    });
                    this.callData.session.on('failed',()=>{//对方挂断
                        // this.$message({message:'对方挂断！',type:'error'})
                        // this.changeStatusText('对方挂断','red')
                        this.callData.status = 'normal'
                    });
                }
            });
        },
        callStart:function(){//开始呼叫对方 呼出
            var eventHandlers = {
                'progress': (e)=>{
                    this.changeStatusText('正在响铃...','green')
                    this.callData.status = 'outRing'
                },
                'failed': (e)=>{
                    this.changeStatusText('呼叫取消','red');
                    this.callData.status = 'normal'
                },
                'ended': (e)=>{
                    this.changeStatusText('通话结束','red');
                    this.callData.status = 'normal'
                },
                'confirmed': (e)=>{
                    this.changeStatusText('正在通话...','green');
                    this.callData.status = 'isCalling'
                },
            };
            var options = {
                'eventHandlers'    : eventHandlers,
                'mediaConstraints' : { 'audio': true, 'video': false }
            };
            this.callData.session = this.callData.ua.call(this.outIn+this.destination+"@"+nat+":7443", options);
            var remoteVideo = document.getElementById('remoteVideo');
            var localVideo = document.getElementById('localVideo');
            var track = 0;
            this.callData.session.on('connecting',(s)=>{//正在响铃
                if (track==0) {// 表示对方开始响铃了会接到这个消息
                    this.changeStatusText('对方正在响铃...','green');
                    this.callData.status = 'outRing'
                }
                if (track==1){//对方接通
                    try {
                        setTimeout(()=>{
                            var pc = this.callData.session._connection
                            var remoteStream = new MediaStream()
                            pc.getReceivers().forEach(function(receiver) {
                                remoteStream.addTrack(receiver.track)
                            });
                            remoteVideo.srcObject = remoteStream
                            remoteVideo.play();
                            var stream = new MediaStream()
                            pc.getSenders().forEach(function(sender) {
                                stream.addTrack(sender.track);
                            });
                            localVideo.srcObject = stream;
                            localVideo.play();
                            this.changeStatusText('对方已接通，正在通话中...');
                            this.callData.status = 'isCalling'
                        },300)
                    }catch (e) {
                        consoleLog(e)
                    }
                }
                track++;
            });
        },
        signIn:function(){//点击 签入 按钮
            this.initConfig();//初始化 配置
            this.signInListener();//签入 监听
            this.signInFaildListener();//签入失败 监听
            this.signOutListener();//签出失败 监听
            this.cominglListener();//来电话 监听
            var websocket = new WebSocket(this.callData.config.wsServers, 'sip');//开始签入之前检测websocket是否是好的
            websocket.onopen = (evt)=>{//websocket已通
                this.callData.ua.start();
                this.changeStatusText('正在签入...','green',true)
                this.$message({message:'正在签入！',type:'success'})
            };
            websocket.onerror = (evt)=>{//websocket不通
                this.$message({message:'请先确定电话呼叫后台是否开启！',type:'error'});
                $('[lay-type="hide"]').click();
                this.callData.isSigned = false;
            };
        },
        signOut:function(){//点击签出按钮
            var websocket = new WebSocket(this.callData.config.wsServers, 'sip');//开始签入之前检测websocket是否是好的
            websocket.onopen = (evt)=>{//websocket已通
                this.changeStatusText('正在签出...','green',true)
                this.$message({message:'正在签出！',type:'success'})
                if (!this.callData.ua) return;
                if (this.callData.ua.isRegistered()) {
                    clearInterval(intervalIndex);
                    this.callData.ua.stop();
                }
            };
            websocket.onerror = (evt)=>{//websocket不通
                this.$message({message:'请先确定电话呼叫后台是否开启！',type:'error'});
                this.callData.isSigned = false;
            };
        },
        layimOpen:function () {//打开聊天的窗口
            layui.use('layim', ()=>{
                var layim = layui.layim;
                //演示自动回复
                var autoReplay = [
                    '您好，我现在有事不在，一会再和您联系。',
                    '你没发错吧？face[微笑] ',
                    '洗澡中，请勿打扰，偷窥请购票，个体四十，团体八折，订票电话：一般人我不告诉他！face[哈哈] ',
                    '你好，我是主人的美女秘书，有什么事就跟我说吧，等他回来我会转告他的。face[心] face[心] face[心] ',
                    'face[威武] face[威武] face[威武] face[威武] ',
                    '<（@￣︶￣@）>',
                    '你要和我说话？你真的要和我说话？你确定自己想说吗？你一定非说不可吗？那你说吧，这是自动回复。',
                    '傻逼，这是自动回复。',
                    '傻逼，你还说，都说了这是自动回复，你就是个逗比，你花时间花脑子打字，而我是自动回复。face[哈哈]',
                    'face[黑线]  你慢慢说，别急……',
                    '(*^__^*) face[嘻嘻] ，是贤心吗？'
                ];
                //基础配置
                layim.config({
                    title:'聊天',
                    avatar:'/static/layui/images/phone.jpg',
                    //初始化接口
                    init: {
                        url: burl+'crm-call/lay-im'
                        ,data: {}
                    }
                    ,uploadImage: {
                        url: '' //（返回的数据格式见下文）
                        ,type: '' //默认post
                    }
                    ,uploadFile: {
                        url: '' //（返回的数据格式见下文）
                        ,type: '' //默认post
                    }
                    ,isAudio: true //开启聊天工具栏音频
                    ,isVideo: true //开启聊天工具栏视频
                    ,tool: [{
                        alias: 'phone'//呼叫电话的工具
                        ,title: '呼叫'
                        ,icon: '&#xf095;'
                    },{
                        alias: 'my'//查看详细资料的工具
                        ,title: '我的资料'
                        ,icon: '&#xf2bc;'
                    }]
                    ,initSkin: '3.jpg' //1-5 设置初始背景
                });
                //监听在线状态的切换事件
                layim.on('online', (status)=>{
                    if(status=='online'&&!this.callData.isSigned){
                        this.signIn()
                    }
                    if(status=='hide'&&this.callData.isSigned){
                        this.signOut()
                    }
                });
                //监听签名修改
                layim.on('sign', function(value){
                    layer.msg(value);
                });
                //监听自定义工具栏点击，以添加代码为例
                layim.on('tool(phone)', function(insert){
                    layer.open({
                        type: 2,
                        maxmin: true, //开启最大化最小化按钮
                        shade: false,
                        area: ['50%', '50%'],
                        title: '呼叫窗口', //不显示标题
                        content: '#/call', //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                    })
                });
                layim.on('tool(my)', function(insert){
                    layer.open({
                        type: 2,
                        maxmin: true, //开启最大化最小化按钮
                        shade: false,
                        area: ['50%', '50%'],
                        title: '我的资料窗口', //不显示标题
                        content: '#/my', //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                    })
                });
                //监听layim建立就绪
                layim.on('ready', function(res){
                    layim.msgbox(5); //模拟消息盒子有新消息，实际使用时，一般是动态获得
                });
                //监听发送消息
                layim.on('sendMessage', function(data){
                    var To = data.to;
                    if(To.type === 'friend'){
                        layim.setChatStatus('<span style="color:#FF5722;">对方正在输入。。。</span>');
                    }
                    //演示自动回复
                    setTimeout(function(){
                        var obj = {};
                        if(To.type === 'group'){
                            obj = {
                                username: '模拟群员'+(Math.random()*100|0)
                                ,avatar: layui.cache.dir + 'images/face/'+ (Math.random()*72|0) + '.gif'
                                ,id: To.id
                                ,type: To.type
                                ,content: autoReplay[Math.random()*9|0]
                            }
                        } else {
                            obj = {
                                username: To.name
                                ,avatar: To.avatar
                                ,id: To.id
                                ,type: To.type
                                ,content: autoReplay[Math.random()*9|0]
                            }
                            layim.setChatStatus('<span style="color:#FF5722;">在线</span>');
                        }
                        layim.getMessage(obj);
                    }, 1000);
                });
                //监听查看群员
                layim.on('members', function(data){
                });
                //监听聊天窗口的切换
                layim.on('chatChange', function(res){
                    var type = res.data.type;
                    console.log(res.data.id)
                    if(type === 'friend'){
                        //模拟标注好友状态
                        //layim.setChatStatus('<span style="color:#FF5722;">在线</span>');
                    } else if(type === 'group'){
                        //模拟系统消息
                        layim.getMessage({
                            system: true
                            ,id: res.data.id
                            ,type: "group"
                            ,content: '模拟群员'+(Math.random()*100|0) + '加入群聊'
                        });
                    }
                });
            });
        },
        layStatusOpen:function () {//状态栏
            //页面层-自定义
            layui.use('layer',()=>{
                window.index123423423423=layui.layer.open({
                    type: 1,
                    title: '',
                    closeBtn: 0,
                    shade:false,
                    shadeClose: false,
                    move: '#move',
                    offset:'t',
                    content: '<div id="callStatus"  style="height: 8px;background-color: #dddddd99;overflow:visible;border-bottom: 8px solid #aaaaaa;border-radius: 4px;max-height: 400px">' +
                    '<div class="padding" style="text-align: center;-webkit-user-select:none;\n' +
                    '-moz-user-select:none;\n' +
                    '-ms-user-select:none;\n' +
                    'user-select:none;" ><div id="move" class="fa fa-arrows" style="margin-right: 40px"></div>电话呼叫状态显示栏（单击开启/关闭）</div>' +
                    '<div class="padding" id="status_" style="color: #78BA32;background-color: #ffffff;">无状态...</div>' +
                    '</div>' +
                    '</div>',
                    success:(i, a)=>{
                        this.layStatus = i;
                        this.layStatus.find('#callStatus').click(()=>{
                            let height = $('#callStatus').height()
                            if (height==8 || this.closed){
                                layui.layer.msg('已显示状态栏')
                                $('#callStatus').css('height','auto')
                            }else{
                                $('#callStatus').css('height','8px')
                            }
                            this.closed = !this.closed;
                        })
                    }
                });
            });
        },
        setIdle:function(){//点击 置闲
            if (this.callData.isSigned){//已经签入
                this.$message({message:'正在置闲...',type:'success'})
                //设置置闲
                this.$post('cti-manager/set-fs',
                    {data:{
                            1:"callcenter_config agent set status "+this.callData.zuoxi+"@${domain} 'Available'",
                        },
                        zuoxi:this.callData.zuoxi,
                        action:"setIdle"  }
                )
                    .then((response) => {
                        if (response.data == 1) {
                            this.$message({message:'置闲成功！',type:'success'})
                            this.callData.isIdled = true;
                        }else{
                            this.$message({message:'置闲失败！',type:'error'})
                            this.changeStatusText('置闲失败','red')
                            this.callData.isIdled = false;
                        }
                    }).catch((e) => {
                    consoleLog(e)
                });
            }else{//已经签出
                this.$message({message:'未签入，请先签入！',type:'error'})
                this.callData.isIdled = false
            }
        },
        setBusy:function(){//点击 置忙
            if (this.callData.isSigned){//已经签入
                this.$message({message:'正在置忙...',type:'success'})
                //设置置闲
                this.$post('cti-manager/set-fs',
                    {data:{
                            1:"callcenter_config agent set status "+this.callData.zuoxi+"@${domain} 'Logged Out'",
                        },
                        zuoxi:this.callData.zuoxi,
                        action:"setBusy",
                    }
                )
                    .then((response) => {
                        if (response.data == 1) {
                            this.$message({message:'置忙成功！',type:'success'})
                            this.callData.isIdled = false;
                        }else{
                            this.$message({message:'置忙失败！',type:'error'})
                            this.changeStatusText('置忙失败','red')
                            this.callData.isIdled = true;
                        }
                    }).catch((e) => {
                    consoleLog(e)
                });
            }else{//已经签出
                this.$message({message:'未签入，请先签入！',type:'error'})
                this.callData.isIdled = false;
            }
        },
    },
    created:function () {
        this.layimOpen()
        this.layStatusOpen()
    }
}
</script>

<style lang="scss" scoped>
  @import "animate.css";
img {
  &.qr {
    width: 100%;
  }
}
 .btn-text {
    color: #5a5e66;
    &.can-hover {
      &:hover {
        color: greenyellow;
      }
    }
  }
.layui-layer-content{
    height: 4px;
  overflow: hidden;
  }
.layui-layer-content:hover{
  height: 100px;
}
</style>
